import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from './store/'
import { Button } from 'antd'
import { removeCart } from '../cart/store/actionCreators'
import { addCart } from '../home/store/actionCreators'
import { withRouter } from 'react-router-dom'
import {
  LiveWrapper,
  LiveType,
  Container,
  LiveCourse,
  LiveTitle,
  LiveDate,
  TipWrapper
} from './style'
class MyCourse extends Component {
  constructor(props) {
    super(props)
    this.state = {
      time: this.formDate(),
      selSubject: '全部',
      startDate: this.formDate()
    }
  }
  componentDidMount() {
    this.props.getMyClass({
      startDate: this.formDate()
    })
    this.props.getMySubject()
    this.props.getCourseBySubject({
      subjectName: this.state.selSubject
    })
  }
  formDate(str) {
    let time
    if(str) {
      time = new Date(str)
    }else {
      time = new Date()
    }
    let y = time.getFullYear()
    let m = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
    let d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
    return y + '-' + m + '-' + d 
  }
  selectSchdule(obj) {
    this.setState({
      time: obj
    }, ()=> {
      this.props.getOneDate({
        thisDate: obj
      })
    })
  }
  renderSchedule() {
    let arr = []
    this.props.myCourse.map(item => {
      arr.push(
        <li key={item.get('date')} onClick={this.selectSchdule.bind(this, item.get('date'))}>
          <a className={[this.state.time === item.get('date') ? 'active' : '']}>
            {item.get('week')}<br/>{item.get('month')}月{item.get('day')}日
          </a>
        </li>
      )
    })
    return arr
  }

  preTime() {
    let time = new Date(new Date(this.state.time).getTime() - (7*24*3600*1000))
    this.setState({
      time: this.formDate(time)
    })
    this.props.getMyClass({
      startDate: this.formDate(time)
    })
  }

  nextTime() {
    let time = new Date(new Date(this.state.time).getTime() + (7*24*3600*1000))
    this.setState({
      time: this.formDate(time)
    })
    this.props.getMyClass({
      startDate: this.formDate(time)
    })
  }

  toWatch(item) {
    // this.props.history.push({
    //   pathname: "/live/" + item.roomId
    // })
    window.location.href="/live?roomId=" + item.roomId
  }

  selectSubject(name) {
    this.setState({
      selSubject: name
    }, ()=> this.props.getCourseBySubject({
      subjectName: name
    }))
  }

  addCart(params) {
    let status = params.get('shoppingStatus')
    let id = params.getIn(['lesson' ,'id'])
    if(status === '已经购买' || status === '免费') {
      this.props.history.push({
        pathname: '/courseitem/' + id
      })
      // window.location.href='/courseitem?id=' + id
    }else if(status === '已加入购物车'){
      this.props.removeCart({
        lessonId: id
      })
      setTimeout(()=> {
        this.props.getCourseBySubject({
          subjectName: this.state.selSubject
        })
      }, 2000)
    }else {
      this.props.addCart(id)
      setTimeout(()=> {
        this.props.getCourseBySubject({
          subjectName: this.state.selSubject
        })
      }, 2000)
    }
  }

  render() {
    return (
      <Container>
        <LiveWrapper>
          <LiveType className="clearfix">
            <ul className="clearfix">
              {
                this.props.mySubject.map(item=> {
                  return (
                    <li key={item} className={this.state.selSubject === item ? 'active': ''} onClick={this.selectSubject.bind(this,item)}><a>{item}</a></li>
                  )
                })
              }
            </ul>
            <TipWrapper className="clearfix">
              {
                this.props.subCourse.size > 0  ? <div>
                  <ul style={{width: '100%', height: '100%', paddingTop: '20px'}} className="clearfix">
                    {
                      this.props.subCourse.map(item => {
                        return (
                          <li style={{float: 'left', width: '25%',height: 'auto',paddingLeft: '5px', paddingRight: '5px'}} key={item.get('lessonId')}> 
                            <img src={item.get('coverUrl')} style={{width: '100%', height: '200px'}} />
                            <p style={{height: '20px', lineHeight: '28px', paddingLeft: '5px'}}>课程名称：{item.get('lessonName')}</p>
                            <p style={{height: '20px', lineHeight: '28px', paddingLeft: '5px'}}>课程时间： {item.get('lessonDate')} <span style={{color: '#8BCA31', float: 'right', marginRight: '10px'}}>{item.get('activityStatus')}</span></p>
                            <p className="clearfix" style={{marginTop: '10px'}}>
                              {
                                item.get('lessonPrice') === '免费' ? "" : <span className="price" style={{color: 'red', fontWeight: 'bold'}} >￥{item.get('lessonPrice')}</span>
                              }
                              <Button style={{float: 'right'}} type="primary" onClick={this.addCart.bind(this, item)}> {item.get('shoppingStatus') === '已经购买' || item.get('shoppingStatus') === '免费' ?  '去观看': (item.get('shoppingStatus') === '已加入购物车' ? '移除购物车': '加入购物车')}</Button>
                            </p>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div> : <div style={{textAlign: 'center', marginBottom: '46px'}}><img src={require('./img/course.png')} /></div>
              }
              
            </TipWrapper>
          </LiveType>
          <LiveCourse>
            <LiveTitle><a style={{fontSize: '16px'}}>直播课表</a></LiveTitle>
            <LiveDate>
            {
              this.state.startDate === this.state.time ? <a className="arrow" disabled><i className="iconfont icon-icon_arrow_left"></i></a>: <a className="arrow" onClick={this.preTime.bind(this)}><i className="iconfont icon-icon_arrow_left"></i></a>
            }
            {
              this.renderSchedule()
            }
            <a className="arrow" onClick={this.nextTime.bind(this)}><i className="iconfont icon-jiantouyou"></i></a>
            </LiveDate>
            <TipWrapper>
              {
                this.props.courseList.size > 0  ? <div>
                  <ul style={{width: '100%'}} className="clearfix">
                    {
                      this.props.courseList.map(item => {
                        return (
                          <li style={{float: 'left', width: '25%',height: 'auto', paddingLeft: '5px', paddingRight: '5px'}}>
                            <img src={item.get('coverUrl')} style={{width: '100%', height: '200px'}}/>
                            <p style={{height: '20px', lineHeight: '28px', paddingLeft: '5px'}}>课程名称：{item.get('lessonName')}</p>
                            <p style={{height: '20px', lineHeight: '28px', paddingLeft: '5px'}}>课程时间： {item.get('lessonDate')} <span style={{color: '#8BCA31', float: 'right', marginRight: '10px'}}>{item.get('activityStatus')}</span></p>
                            <p className="clearfix" style={{marginTop: '10px'}}>
                            {
                              item.get('type') === '即将开始' ? '' : <a href="#" className="watch" onClick={this.toWatch.bind(this, item)}> 去观看</a>
                            }
                            </p>
                          </li>
                        )
                      })
                    }
                  </ul>
                </div> : <div style={{textAlign: 'center'}}><img src={require('./img/kong.png')}/></div>
              }
              
            </TipWrapper>
          </LiveCourse>
        </LiveWrapper>
      </Container>
    )
  }
}

const mapState = (state) => ({
  myCourse: state.getIn(['myCourse', 'myCourse']),
  courseList: state.getIn(['myCourse', 'courseList']),
  mySubject: state.getIn(['myCourse', 'mySubject']),
  subCourse: state.getIn(['myCourse', 'subCourse'])
})

const mspDispatch = (dispatch) => ({
  getMyClass(params) {
    dispatch(actionCreators.getMyCourse(params))
  },
  getOneDate(params) {
    dispatch(actionCreators.getOneDay(params))
  },
  getMySubject() {
    dispatch(actionCreators.getCourseBySubject())
  },
  getCourseBySubject(params) {
    dispatch(actionCreators.getCourseBySubject(params))
  },
  addCart(lessonId) {
    dispatch(addCart({
      lessonId
    }))
  },
  removeCart(params) {
    dispatch(removeCart(params))
  }
})



export default connect(mapState, mspDispatch)(withRouter(MyCourse))